import { createBrowserRouter, Navigate } from "react-router-dom"
import { PlusSquareOutlined, RightCircleOutlined } from "@ant-design/icons"

import { lazy } from "react"
const Layout = lazy(() => import("../pages/layout"))
const Error404 = lazy(() => import("../pages/error404"))
const Login = lazy(() => import("../pages/login"))
const Home = lazy(() => import("../pages/home"))
const User = lazy(() => import("../pages/user"))
const UserList = lazy(() => import("../pages/userlist"))
const Order = lazy(() => import("../pages/order"))
const OrderList = lazy(() => import("../pages/orderlist"))
const OrderKist = lazy(() => import("../pages/orderkist"))
const allRouters = {
    home: {
        path: "/index/home",
        element: <Home />,
        title: "首页",
        icon: <RightCircleOutlined />,
    },
    user: {
        path: "/index/user",
        element: <User />,
        title: "用户管理",
        icon: <RightCircleOutlined />,
    },
    userlist: {
        path: "/index/userlist",
        element: <UserList />,
        title: "用户聊天",
        icon: <RightCircleOutlined />,
    },
    order: {
        path: "/index/order",
        element: <Order />,
        title: "权限管理",
        icon: <RightCircleOutlined />,
        children: [
            {
                path: "/index/order/orderlist",
                element: <OrderList />,
                title: "权限列表",
                icon: <PlusSquareOutlined />,
            },
            {
                path: "/index/order/orderkist",
                element: <OrderKist />,
                title: "权利限制",
                icon: <PlusSquareOutlined />,
            },
        ],
    },
}

const username = localStorage.getItem("username") || "user"
const userRoles = {
    admin: {
        pages: ["home", "user", "userlist","order"],
        btns: {
            home: ["add", "edit", "delete", "query"],
        },
    },
    user: {
        pages: ["home", "user"],
        btns: {
            home: ["add", "edit"],
        },
    },
}

const { pages, btns } = userRoles[username]

export const routes = pages.map((item) => {
    return {
        ...allRouters[item],
        loader: () => {
            return btns[item]
        },
    }
})

const routers = createBrowserRouter([
    { path: "/", element: <Navigate to="/index/home" /> },
    { path: "/index", element: <Layout />, children: routes },
    { path: "*", element: <Error404 /> },
    { path: "/login", element: <Login /> },
])

export default routers